<template>
  <transition enter-active-class="slideInUp faster animated" leave-active-class="slideOutDown faster animated">
    <div class="bapinModule" v-show="isShowAni">
      <div class="bapinBox publicVCenter">
        <img src="@/assets/image/hdBar/bapinTitle.png" class="titleText" />
        <div class="effectPreview">
          <transition enter-active-class="slideInRight faster animated" leave-active-class="slideOutLeft faster animated">
            <div class="effectPreviewContent" ref="effectPreview" v-show="previewVisible"></div>
          </transition>
          <img :src="headImg" class="headImg" v-show="previewCtVisible" />
          <div class="name" v-show="previewCtVisible">{{ name }}</div>
          <div class="content" v-show="previewCtVisible">{{ previewWish }}</div>
        </div>
        <div class="typeWrap">
          <div
            class="typeItem publicVCenter"
            v-for="item in bapinTypeList"
            :key="item.giftId"
            v-tap="{ methods: chooseBapinType, giftId: item.giftId }"
          >
            <div class="typeBox publicHvCenter" :class="{ active: currentBapinType === item.giftId }">
              <div class="time">{{ item.shijian }}秒</div>
              <div class="price publicVCenter">{{ item.price }}<img src="@/assets/image/icon/diamond.png" /></div>
            </div>
            <div class="desc">{{ item.giftname }}</div>
          </div>
        </div>
        <div class="txtWrap publicHCenter">
          <textarea
            v-model="content"
            :maxlength="canCustomizeInput ? 40 : 0"
            cols="30"
            rows="10"
            placeholder="输入内容(40字以内)"
            v-on:blur="blur"
          ></textarea>
          <div class="ylBtn publicHvCenter" v-tap="{ methods: ganerateRandomWish }">语录</div>
        </div>
        <div class="btnWrap publicHvCenter" v-tap="{ methods: send }">发送</div>
      </div>
    </div>
  </transition>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { sendBapinGift } from '@/api/index/index';
import { sendBapinGiftMessage } from '@/api/chat/index';
import { POPUP_MODULE, QUICKWISH } from '@/assets/constant/index';
import { BapinLove } from '@/assets/constant/effect';
import SVGA from 'svgaplayerweb';
import { timeoutTask, generateRandom } from '../../utils/index';

const quickWishLen = QUICKWISH.length;
export default {
  name: 'bapinPopup',
  computed: {
    ...mapState({
      bapinTypeList: (state) => state.live.bapinTypeList,
      currentBapinType: (state) => state.app.currentBapinType,
      money: (state) => state.user.money,
      freeSendGift: (state) => state.user.freeSendGift,
      headImg: (state) => state.user.headImg,
      name: (state) => state.user.name,
      canCustomizeInput: (state) => state.app.canCustomizeInput,
    }),
  },
  watch: {
    canCustomizeInput(value) {
      if (!value) {
        this.content = '';
      }
    },
  },
  beforeDestroy() {
    this.destroySvga();
  },
  created() {},
  mounted() {
    // 执行弹出动画
    this.showAniStart();
    console.log('***bapinTypeList***');
    console.log(this.bapinTypeList);
    this.playPreviewAni();
  },
  data() {
    return {
      isShowAni: false, // 控制bapin box弹出动画
      content: '',
      previewVisible: false,
      previewWish: '',
      previewCtVisible: false,
    };
  },
  methods: {
    ...mapMutations({
      setCurrentBapinType: 'app/setCurrentBapinType',
      setUserInfo: 'user/setUserInfo',
      togglePopup: 'app/togglePopup',
      setOrigin: 'app/setOrigin',
    }),
    destroySvga() {
      console.log('销毁');
      if (this.SVGAPlayer) {
        this.SVGAPlayer.stopAnimation();
        this.SVGAPlayer.clear();
        this.SVGAPlayer = null;
      }
    },
    blur() {
      window.scrollTo(0, -document.documentElement.clientHeight);
    },
    showAniStart() {
      this.isShowAni = true;
    },
    hideAniStart() {
      this.isShowAni = false;
    },
    chooseBapinType(d) {
      this.setCurrentBapinType(d.giftId);
      this.playPreviewAni();
    },
    ganerateRandomWish() {
      this.content = QUICKWISH[generateRandom(0, quickWishLen)];
    },
    validateSend() {
      let flag = true;
      const choosedBapinType = this.bapinTypeList.find((item) => item.giftId === this.currentBapinType);
      if (!this.currentBapinType) {
        flag = false;
        this.$toast.center('请选择霸屏类型!');
      } else if (!this.content) {
        flag = false;
        this.$toast.center('请输入霸屏内容!');
      } else if (this.freeSendGift) {
        flag = true;
      } else if (choosedBapinType.price > this.money) {
        this.$toast.center('余额不足,请充值!');
        flag = false;
        this.setOrigin('sendBapin');
        this.togglePopup();
        timeoutTask(() => {
          this.togglePopup(POPUP_MODULE.rechargeModule.key);
        }, 200);
      }
      return flag;
    },
    playPreviewAni() {
      this.previewCtVisible = false;
      this.previewVisible = false;
      this.destroySvga();
      timeoutTask(() => {
        this.$nextTick(() => {
          let tmpIndex = -1;
          let tmpBapinStr = 'bapinLove1';
          for (let i = 0; i < this.bapinTypeList.length; i += 1) {
            if (this.bapinTypeList[i].giftId === this.currentBapinType) {
              tmpIndex = i;
              break;
            }
          }
          tmpBapinStr = `bapinLove${tmpIndex + 1}`;
          this.SVGAPlayer = new SVGA.Player(this.$refs.effectPreview);
          this.$svgaParser.load(
            BapinLove[tmpBapinStr],
            (videoItem) => {
              this.SVGAPlayer.setVideoItem(videoItem);
              this.SVGAPlayer.startAnimation();
              this.previewVisible = true;
              this.previewWish = QUICKWISH[generateRandom(0, quickWishLen)];
              timeoutTask(() => {
                this.previewCtVisible = true;
              }, 500);
            },
            (err) => {
              return Promise.reject(err);
            },
          );
        });
      }, 500);
    },
    send() {
      if (!this.validateSend()) {
        return;
      }
      this.$loading('发送中...');
      sendBapinGift(this.content)
        .then((res1) => {
          console.log(res1);
          this.$loading.close();
          // 更新 用户余额
          this.setUserInfo({
            money: res1.result.balance,
          });
          return this.sendBroadcast(this.content); // 发送礼物的广播
        })
        .then(() => {
          this.content = '';
          this.$toast.center('发送成功!');
          this.togglePopup();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    sendBroadcast(content) {
      sendBapinGiftMessage(content);
    },
  },
};
</script>
<style lang="less" scoped>
img {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
.bapinModule {
  position: absolute;
  width: 100%;
  bottom: 0;
  .bapinBox {
    width: 750px;
    height: 900px;
    flex-direction: column;
    background: #170d41;
    .titleText {
      width: 343px;
      height: 72px;
      position: relative;
    }
    .effectPreview {
      width: 100%;
      height: 234px;
      background-color: #000;
      margin-top: 32px;
      position: relative;
      .effectPreviewContent {
        width: 100%;
        height: 100%;
      }
      .headImg {
        position: absolute;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        top: 75px;
        left: 122px;
        z-index: 1;
      }
      .name {
        font-size: 21px;
        color: #fdf47b;
        position: absolute;
        left: 250px;
        top: 70px;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        z-index: 1;
      }
      .content {
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        position: absolute;
        left: 268px;
        top: 105px;
        letter-spacing: 5px;
        width: 370px;
        height: 45px;
        z-index: 1;
        position: absolute;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }
    }
    .colorWrap {
      width: 100%;
      height: 153px;
      margin-top: 46px;
      display: flex;
      justify-content: space-around;
      .item {
        width: 215px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .price {
          width: 182px;
          height: 32px;
          background-image: url(https://static.hudongmiao.com/joymewH5/img/popupArea/priceBox.png);
          background-size: 100% 100%;
          position: relative;
          left: 8px;
          font-size: 24px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 14px;
          letter-spacing: 1px;
          color: #8a4e41;
          .unit {
            width: 28px;
            height: 21px;
            margin-left: 6px;
          }
        }
        .color {
          width: 210px;
          height: 100px;
          background-blend-mode: normal, normal;
          border-radius: 8px;
          border: 5px solid rgba(255, 255, 255, 0.24);
          font-size: 28px;
          color: #ffffff;
          &.active {
            &.qx {
              background-image: linear-gradient(0deg, #4ffff9 0%, #7be5fc 50%, #a6caff 100%), linear-gradient(#59cfec, #59cfec);
              color: #1c8bbe;
            }
            &.mh {
              background-image: linear-gradient(0deg, #9d2aff 0%, #ce3cf4 50%, #ff4de8 100%), linear-gradient(#d115e2, #d115e2);
              color: #620095;
            }
            &.yl {
              background-image: linear-gradient(0deg, #ff3140 0%, #ff8787 100%), linear-gradient(#b50054, #b50054);
              color: #ac123e;
            }
          }
        }
      }
    }
    .typeWrap {
      display: flex;
      margin-top: 46px;
      justify-content: space-around;
      width: 90%;
      .typeItem {
        width: 168px;
        flex-direction: column;
        margin: 0 5px;
        .typeBox {
          width: 168px;
          height: 80px;
          border-radius: 8px;
          .time {
            font-size: 28px;
            font-weight: 400;
            color: #ffffff;
          }
          .price {
            font-size: 24px;
            font-weight: 400;
            color: #ffffff;
            margin-left: 12px;
          }
          img {
            width: 24px;
            margin-top: 6px;
            margin-left: 3px;
          }
        }
        .desc {
          font-size: 28px;
          font-weight: 400;
          margin-top: 10px;
        }
        &:nth-child(1) {
          .typeBox {
            background: linear-gradient(276deg, #71b3ff 0%, #2c82e4 100%);
            &.active {
              box-shadow: 0px 0px 50px #2c82e4;
            }
          }
          .desc {
            color: #2c82e4;
          }
        }
        &:nth-child(2) {
          .typeBox {
            background: linear-gradient(276deg, #ff7171 0%, #e42c2c 100%);
            &.active {
              box-shadow: 0px 0px 50px #e42c2c;
            }
          }
          .desc {
            color: #e63030;
          }
        }
        &:nth-child(3) {
          .typeBox {
            background: linear-gradient(276deg, #c571ff 0%, #e42cd5 100%);
            &.active {
              box-shadow: 0px 0px 50px #e42cd5;
            }
          }
          .desc {
            color: #e232d9;
          }
        }
        &:nth-child(4) {
          .typeBox {
            background: linear-gradient(276deg, #e49e2c 0%, #ffc27f 100%);
            &.active {
              box-shadow: 0px 0px 50px #ffc27f;
            }
          }
          .desc {
            color: #e59f2f;
          }
        }
      }
    }
    .txtWrap {
      margin-top: 32px;
      position: relative;
      textarea {
        width: 710px;
        height: 116px;
        font-size: 28px;
        padding: 20px 32px;
        padding-right: 120px;
        color: #fff;
        outline: none;
        box-sizing: border-box;
        border-image: linear-gradient(99deg, #45f6fe 0%, #c026ed 100%) 1 1;
        background-color: transparent;
        &::placeholder {
          font-size: 28px;
          color: #756ea1;;
        }
      }
      .ylBtn {
        width: 88px;
        height: 48px;
        background: #231f44;
        border-radius: 10px;
        font-size: 28px;
        font-weight: 400;
        color: #c2baf5;
        position: absolute;
        top: 32px;
        right: 48px;
      }
    }
    .btnWrap {
      width: 400px;
      height: 92px;
      margin-top: 48px;
      background: linear-gradient(90deg, #6c47ff, #ff68f9 100%);
      font-size: 32px;
      font-weight: 400;
      color: #ffffff;
      border-radius: 10px;
    }
  }
}
</style>
